$(function () {
    var $colorImg
    var $size
    var $color_Id
    var $sum
    var $color_Txt
    var $Img
    $('.cartbox').on('click', function () {
        $('.cart-list').slideToggle()
    })
    $('.goodsColor').on('click', 'a', function () {
        $(this).toggleClass('select').parents('li').siblings().find('a').removeClass('select')
        // 获取点击的商品颜色
        $colorImg = $(this).children('img')[0].alt
        // 获取点击的自定义id号
        $color_Id = $(this).children('img')[0].attributes[3].nodeValue
        // 获取点击的商品简介
        $color_Txt = $(this).children('img')[0].attributes[2].nodeValue
        $Img = $(this).children('img')[0].attributes[0].nodeValue
        console.log($Img);
    })
    $('.BoxSize').on('click', "span", function () {
        $(this).toggleClass('active').parents('li').siblings().find('span').removeClass('active')
        // 获取点击的商品尺码
        $size = $(this).children('nobr').text()
    })
    $('.decrease').click(function () {
        var $num1 = $('.buyNum').val()
        $num1 = $num1 - 1
        if ($num1 <= 1) {
            $num1 = 1
        }
        $('.buyNum').val($num1)
        $('.buynums').html($num1)
    })
    $('.increase').click(function () {
        var $num2 = $('.buyNum').val()
        $num2 = parseInt($num2) + 1
        $('.buyNum').val($num2)
        $('.buynums').html($num2)
    })
    var res1
    var arr1 = []
    var res2
    var arr2 = []
    $('.addCart').on('click', function () {
        var dataList = JSON.parse(Cookies.get('carts') || '[]')
        var num = 0
        dataList.forEach(function (item) {
            num += Number(item.num)
        })
        console.log(num);
        $('.nums').children('b').html(num)
        Array.from($('.BoxSize').find('span')).forEach(function (item) {

            res1 = $(item).hasClass('active')
            arr1.push(res1)
        })
        var Res1 = arr1.some(function (item) {
            return item == true
        })
        Array.from($('.goodsColor').find('a')).forEach(function (item) {
            res2 = $(item).hasClass('select')
            arr2.push(res2)
        })
        var Res2 = arr2.some(function (item) {
            return item == true
        })
        if (Res1 == true && Res2 == true) {
            addCart()
            arr1 = []
            arr2 = []
        } else {
            arr1 = []
            arr2 = []
            layer.msg('请选择尺码和颜色!');
            return
        }



    })
    var dataList = JSON.parse(Cookies.get('carts') || '[]')
    var strHtml = ``
    dataList.forEach(function (item) {
        strHtml += `
            <li style="border: 1px solid #ccc;" id="cart_list">
            <img src=${item.img} alt=""style="cursor: pointer; width: 60px;height: 60px;margin: 0 68px;">
                <p>${item.txt}</p>
                <p style="color:#bbb">(&nbsp;尺码:${item.size},颜色:${item.color}&nbsp;)</p>
            </li>        
        `
    })
    $('.cart-list').find('ul').html(strHtml)

    function addCart() {
        $sum = $('.buyNum').val()
        var cart = {
            id: $color_Id,
            color: $colorImg,
            txt: $color_Txt,
            img: $Img,
            size: $size,
            num: $sum,
            price: 435
        }
        console.log(cart);

        var localData = JSON.parse(Cookies.get('carts') || '[]')
        var isOneAdd = true
        var strHtml = ``
        Array.from(cart).forEach(function (item) {
            strHtml += `
                <li style="border: 1px solid #ccc;" id="cart_list">
                    <p>${item.txt}</p>
                    <p style="color:#bbb">(&nbsp;尺码:${item.size},颜色:${item.color}&nbsp;)</p>
                </li>
            `
        })
        $('.cart-list').find('ul').append(strHtml)
        localData.forEach(function (item) {
            if (item.id == cart.id && item.size == cart.size) {
                item.num = Number(item.num) + Number(cart.num);
                isOneAdd = false
                strHtml += `
                    <li style="border: 1px solid #ccc;" id="cart_list">
                        <p>${item.txt}</p>
                        <p style="color:#bbb">(&nbsp;尺码:${item.size},颜色:${item.color}&nbsp;)</p>
                    </li>
                `
            }
        })
        $('.cart-list').find('ul').append(strHtml)
        if (isOneAdd == true) {
            strHtml += `
                <li style="border: 1px solid #ccc;" id="cart_list">
                    <p>${cart.txt}</p>
                    <p style="color:#bbb">(&nbsp;尺码:${cart.size},颜色:${cart.color}&nbsp;)</p>
                </li>
            `
            $('.cart-list').find('ul').append(strHtml)
            localData.push(cart)
        }
        Cookies.set('carts', JSON.stringify(localData), {
            expires: 10
        })
        layer.msg('成功加入购物车!');
    }
})